<template>
  <!--图标样式-->
  <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

  <!--布局框架-->
  <link rel="stylesheet" type="text/css" href="/assets/css/util.css">

  <!--主要样式-->
  <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
  
  <div class="limiter">
      <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
          <div class="wrap-login100 p-t-190 p-b-30">
              <van-form @submit="login" class="login100-form validate-form">
                  <!-- logo -->
                  <div class="login100-form-avatar" style='margin-bottom:65px;'>
                      <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                  </div>
                  
                  <!-- 邮箱 -->
                  <div class="wrap-input100 validate-input m-b-10">
                      <van-field
                        v-model="email"
                        name="email"
                        placeholder="请输入登录邮箱"
                        left-icon="envelop-o"
                        :rules="rules.email"
                      />
                  </div>

                  <!-- 密码 -->
                  <div class="wrap-input100 validate-input m-b-10">
                      <van-field 
                        v-model="password"
                        name="password"
                        type="password"
                        placeholder="请输入密码"
                        left-icon="bag-o"
                        :rules="rules.password"
                      />
                  </div>

                  <!-- 登录按钮 -->
                  <div class="container-login100-form-btn p-t-10">
                      <van-button native-type="submit" round block color="#333333">登 录</van-button>
                  </div>

                  <div class="text-center w-full p-t-25 p-b-230">
                      <a href="index.html#" class="txt1">忘记密码？</a>
                  </div>

                  <div class="text-center w-full">
                      <router-link class="txt1" to="/user/base/register">
                          立即注册
                          <i class="fa fa-long-arrow-right"></i>
                      </router-link>
                  </div>
              </van-form>
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'BaseLogin',
    data()
    {
      return {
        email:'',
        password:'',
        //效验规则
        rules:{
          email:[
            {
              required: true,
              message: '请输入登录邮箱'
            },
            {
              message: '邮箱输入的格式有误',
              validator(value)
              {
                //正则表达式
                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")

                //test方法返回true 和 false 
                return reg.test(value)
              }
            }
          ],
          password:[
            {
              required: true,
              message: '请输入密码'
            }
          ]
        }
      }
    },
    methods: {
    //表单提交的方法
      async login(form)
      {
        // 调用登录接口
        var result = await this.$api.login(form)

        if(result.code == 1)
        {
          // 登录成功记录cookie
          this.$cookies.set('LoginUser',result.data)

          this.$notify({
            type:'success',
            message:result.msg,
            duration: 1000,
            onClose:() => {
              //当他消失的时候跳转
              this.$router.push(result.url)
            }
          })
        }else
        {
          //提示信息
          this.$notify({
            message:result.msg,
            type: 'danger'
          })
        }
      }
    }
  }
</script>